import {useState} from 'react';

// 这是函数组件，里面没有this
// 事件绑定，赋值给事件属性的那个函数，是事件处理函数
const fn = (a,b)=>{
    return a+b
}
const sum = fn(1,1)*200+20;
// console.log(sum);

const Hooks2 = () => {
    const [text, setText] = useState('');
    const [list, setList] = useState([{title: 1}]);
    const count = list.filter(item=>item.isClick).length

    const add = () => {
        setList([ ...list, {title: text} ])
    }
    const toggleBg = (title) => {

        const newList = list.map(
            item => title == item.title ? { ...item, isClick: !item.isClick }:item
        )
        // const newList = list.map(item=>{
        //     if(title==item.title){
        //         return { ...item, isClick: !item.isClick }
        //         // item.isClick = !item.isClick
        //         // return item
        //     }else{
        //         return item
        //     }
        // })
        setList(newList)
    }
    const handleChange = (e) => {
        setText(e.target.value);
    }
    return (
        <div>
            <h2>红色背景的条数：{count}</h2>
            <ul>
                {
                    list.map((item,index)=>{
                        return (
                            <li 
                                style={{background: item.isClick?'red':'#fff'}}
                                key={item.title}
                                onClick={() => toggleBg(item.title)}
                            >
                                {item.title}
                            </li>
                        )
                    })
                }
            </ul>
            {/* 受控组件 */}
            <input
                value={text} 
                type="text"
                onChange={handleChange}
                //不要写成下面这样，没必要
                // onChange={(e)=>handleChange(e)}
            />
            <button onClick={add}>添加</button>
        </div>
    )
}

export default Hooks2